{extend name="public/base"/}
{block name="body"}
<style>
.mui-table-view-cell p {
    margin-bottom: 0;
    font-size: 12px;
}
.mui-table-view .mui-media-object {
    line-height: 42px;
    max-width: 60px;
    height: 60px;
}
.mui-card-header {
    font-size: 14px;
    border-radius: 2px 2px 0 0;
        padding: 5px 10px;
}
.mui-h5, h5 {
     font-size: 12px;
    font-weight: 400;
    color: #8f8f94;
}
.mui-content a {

}
</style>
<header class="mui-bar mui-bar-nav">
  <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  <h1 class="mui-title">评论</h1>
</header>
<div class="mui-content">

  <div class="mui-card" >
      <div class="mui-card-header ">
          <div class="mui-ellipsis mui-col-xs-8">订单编号: {$info.out_trade_no}</div>
      </div>
      <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
        <li class="mui-table-view-cell">
            <div class="mui-table" style="font-size:12px;">
                <div class="mui-table-cell mui-col-xs-4">
                    商品评分
                </div>
                <div class="mui-table-cell mui-col-xs-8 shopscore" style="  color: #007aff;">
                    <span class="mui-icon mui-icon-star-filled"></span>
                    <span class="mui-icon mui-icon-star-filled"></span>
                    <span class="mui-icon mui-icon-star-filled"></span>
                    <span class="mui-icon mui-icon-star"></span>
                    <span class="mui-icon mui-icon-star"></span>
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-table" style="font-size:12px;">
                <div class="mui-table-cell mui-col-xs-4">
                    配送评分
                </div>
                <div class="mui-table-cell mui-col-xs-8 deliveryscore" style="  color: #007aff;">
                  <span class="mui-icon mui-icon-star-filled"></span>
                  <span class="mui-icon mui-icon-star-filled"></span>
                  <span class="mui-icon mui-icon-star-filled"></span>
                  <span class="mui-icon mui-icon-star"></span>
                  <span class="mui-icon mui-icon-star"></span>
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-table" style="font-size:12px;">
                <div class="mui-table-cell mui-col-xs-12">
                  <div class="mui-input-row" style="margin: 10px 5px;">
                  					<textarea id="textarea" rows="5" placeholder="评论"></textarea>
                  				</div>
                </div>
            </div>
        </li>


      </ul>
      <button type="button" class="mui-btn mui-btn-primary mui-btn-block" style="    padding: 5px;">提交</button>
  </div>
</div>
{/block}
{block name="script"}
<script>
  $(function(){
    $('.mui-table-cell > .mui-icon').click(function(){
      var $this = $(this)
      if($this.hasClass('mui-icon-star')){
        $this.prevAll().removeClass('mui-icon-star').addClass('mui-icon-star-filled');
        $this.removeClass('mui-icon-star').addClass('mui-icon-star-filled');
      }else{
        $this.removeClass('mui-icon-star-filled').addClass('mui-icon-star');
        $this.nextAll().removeClass('mui-icon-star-filled').addClass('mui-icon-star');
      }
    })

    $('.mui-btn-block').on('click', function(){
      var shopscore = $('.shopscore').find('.mui-icon-star-filled').length,
       deliveryscore = $('.deliveryscore').find('.mui-icon-star-filled').length,
       comment = $.trim($('#textarea').val())
      if(!comment){
        mui.toast('请填写评论！')
        return;
      }
      if(comment.length <5){
        mui.toast('评论字符必须大于5位！')
        return;
      }

      $.post("{:url('index/order/comment')}", {
          "order_id": "{$info.id}",
          "shop_score": shopscore,
          "delivery_score": deliveryscore,
          "comment": comment
      }, function(data) {
          mui.toast('评论成功！')
          setTimeout(function() {
            mui.back()
          }, 2000);
      }, "json");

    })
  })
</script>
{/block}
